<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增有权人签字管理')" />
    <th:block th:include="include :: datetimepicker-css" />
    <th:block th:include="include :: bootstrap-fileinput-css" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-signature-add">
            <div class="form-group">
                <label class="col-sm-2 control-label">授权人机构号：</label>
                <div class="col-sm-4">
                    <div class="input-group">
                        <input name="orgCode" id="orgCode" class="form-control" type="text" required>
                        <div class="input-group-btn">
                            <button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-right" role="menu">
                            </ul>
                        </div>
                    </div>
                </div>
                <label class="col-sm-2 control-label">授权人机构名称：</label>
                <div class="col-sm-4">
                    <div class="input-group">
                        <input name="orgName" id="orgName" class="form-control" type="text" required>
                        <div class="input-group-btn">
                            <button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-right" role="menu">
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">授权人职位：</label>
                <div class="col-sm-4">
                    <input name="position" id="position" class="form-control" type="text" required>
                </div>
                <label class="col-sm-2 control-label">授权人姓名：</label>
                <div class="col-sm-4">
                    <input name="name" id="name" class="form-control" type="text" required>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">影像启用日期：</label>
                <div class="col-sm-4">
                    <div class="input-group date">
                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                        <input name="startDate" id="startDate" class="form-control" placeholder="yyyy-MM-dd" type="text" required>
                    </div>
                </div>
                <label class="col-sm-2 control-label">影像停用日期：</label>
                <div class="col-sm-4">
                    <div class="input-group date">
                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                        <input name="endDate" id="endDate" class="form-control" placeholder="yyyy-MM-dd" type="text" required>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">申请事由：</label>
                <div class="col-sm-10">
                    <textarea rows="2" cols="20" id="remark" name="remark" class="form-control" type="text" required></textarea>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">授权人签字图片路径：</label>
                <div class="col-sm-10">
                    <input type="file"  class="file file-loading" id="signature" name="signature" multiple data-min-file-count="1" required>
                </div>
            </div>
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: datetimepicker-js" />
    <th:block th:include="include :: bootstrap-fileinput-js" />
    <th:block th:include="include :: bootstrap-suggest-js" />
    <script type="text/javascript">
        var prefix = ctx + "paea/signature"
        $("#form-signature-add").validate({
            focusCleanup: true
        });
        $("#signature").fileinput({
            language : 'zh',
            uploadUrl: prefix+'/fileUpload',
            uploadAsync : true, //默认异步上传
            showCaption:true,//预览
            autoReplace:true,//自动替换
            allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀
            overwriteInitial: false,
            showUpload:false,
            maxFileCount:1,
            maxFileSize:10240,//单位为kb，上传文件的最大大小值
            elCaptionText:'',
            showPreview : true,
            enctype: 'multipart/form-data',
            showClose: false,
            dropZoneTitle:'',
            placeholder:'',
            layoutTemplates: {
                actions:'<div class ="file_actions"><div class="clearfix"></div></div>',
                actionDelete:'', //去除上传预览的缩略图中的删除图标
                actionUpload:'',//去除上传预览缩略图中的上传图片；
                actionZoom:''   //去除上传预览缩略图中的查看详情预览的缩略图标。
            },
        });
        //异步上传返回结果处理
        $('#signature').on('fileerror', function(event, data, msg) {
            console.log("fileerror");
            console.log(data);
        });
        //异步上传返回结果处理
        $("#signature").on("fileuploaded", function(event, data, previewId, index) {
            console.log("fileuploaded");
            $("#signaturePath").val(data.response.url);

        });

        //批量上传错误结果处理
        $('#signature').on('filebatchuploaderror', function(event, data, msg) {
            console.log("filebatchuploaderror");
            console.log(data);
        });

        //批量上传成功结果处理
        $("#signature").on("filebatchuploadsuccess",
            function(event, data, previewId, index) {
                console.log("filebatchuploadsuccess");
                console.log(data);
            });

        //上传前
        $('#signature').on('filepreupload', function(event, data, previewId, index) {
            console.log("filepreupload");
        });
        function submitHandler() {
            var formData = new FormData();
            formData.append("orgCode",$("#orgCode").val());
            formData.append("orgName",$("#orgName").val());
            formData.append("position",$("#position").val());
            formData.append("name",$("#name").val());
            formData.append("startDate",$("#startDate").val());
            formData.append("endDate",$("#endDate").val());
            formData.append("remark",$("#remark").text());
            formData.append("signature", $('#signature')[0].files[0]);
            if ($.validate.form()) {
                var config = {
                    url: prefix + "/add",
                    data: formData,
                    cache: false,
                    contentType: false,
                    processData: false,
                    type: 'POST',
                    beforeSend: function () {
                        $.modal.loading("正在处理中，请稍后...");
                        $.modal.disable();
                    },
                    success: function(result) {
                        if (typeof callback == "function") {
                            callback(result);
                            alert(result.msg);
                        }
                        $.operate.successCallback(result);
                    }
                };
                $.ajax(config);
                //$.operate.save(prefix + "/add", formData);
            }
        }
        $("input[name='startDate']").datetimepicker({
            format: "yyyy-mm-dd",
            minView: "month",
            autoclose: true
        });

        $("input[name='endDate']").datetimepicker({
            format: "yyyy-mm-dd",
            minView: "month",
            autoclose: true
        });
        //搜索自动补全
        var testBsSuggest = $("#orgCode").bsSuggest({
            url: ctx + "system/dept/deptModel",
            showBtn: false,
            idField: "deptName",
            keyField: "deptId"
        }).on('onSetSelectValue', function (e, keyword) {
            $("#orgName").val(keyword.id);
        });
        //搜索自动补全
        var testBsSuggest = $("#orgName").bsSuggest({
            url: ctx + "system/dept/deptModel",
            showBtn: false,
            idField: "deptId",
            keyField: "deptName"
        }).on('onSetSelectValue', function (e, keyword) {
            $("#orgCode").val(keyword.id);
        });
        /*.on('onDataRequestSuccess', function (e, result) {
            console.log('onDataRequestSuccess: ', result);
        }).on('onSetSelectValue', function (e, keyword) {
            console.log('onSetSelectValue: ', keyword);
        }).on('onUnsetSelectValue', function (e) {
            console.log("onUnsetSelectValue");
        });*/
    </script>
</body>
</html>